<template>
  <div class="replyWrapper">
    <div class="title">回复详情</div>
    <div class="main">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 回复的那个人 -->
        <div class="replyWho">
          <div class="replyWho-photo">
            <img :src="replyDatas.aut_photo" alt="">
          </div>
          <div class="replyWho-left">
            <div class="replyWho-userInfo">
              <div class="replyWho-name">{{ replyDatas.aut_name }}</div>
              <div class="replyWho-praise">
                <i class="toutiao toutiao-dianzan"></i>
                {{ replyDatas.like_count }}
              </div>
            </div>
            <div class="replyWho-comtent">
              {{ replyDatas.content }}
            </div>
            <div class="replyWho-operation">
              <div class="replyWho-time">
                {{ replyDatas.pubdate | formatDate }}
              </div>
              <div class="reply" @click="isReplyShow=true">回复</div>
            </div>
          </div>
        </div>
        <div class="allReply">
          全部回复<b>{{ totalCount }}</b>
        </div>
        <!-- 回复的朋友们 -->
        <div
          class="reply-item"
          slot="default"
          v-for="item in commentlList"
          :key="item.com_id.toString()"
        >
          <div class="photo">
            <img :src="item.aut_photo" alt="" />
          </div>
          <div class="left">
            <div class="userInfo">
              <div class="name">{{ item.aut_name }}</div>
              <div class="praise">
                <i class="toutiao toutiao-dianzan"></i>
                {{ item.like_count }}
              </div>
            </div>
            <div class="comtent">
              {{ item.content }}
            </div>
            <div class="operation">
              <div class="time">{{ item.pubdate | formatDate }}</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 回复框 -->
    <comments
       v-model="isReplyShow"
      :artid="replyDatas.com_id"
      :articleId="articleId"
      :mycomment="mycomment"
      @sendcomment="updataComment($event)"
    ></comments>
  </div>
</template>

<script>
import { conmentArticle } from '@/api/homepage/articleLists.js'
import Comments from '@/components/comments.vue'
export default {
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      totalCount: 0,
      offset: null, // 回复偏移量
      limit: 10, // 没次回复个数
      commentlList: [],
      mycomment: [], // 传递给回复的空数组
      isReplyShow: false
    }
  },
  props: ['replyDatas', 'articleId'],
  created () {},
  mounted () {},
  methods: {
    async onLoad () {
      // 获取评论回复
      // 异步更新数据
      try {
        const parmas = {
          type: 'c',
          source: this.replyDatas.com_id.toString(),
          offset: this.offset,
          limit: this.limit
        }
        const {
          data: { data: res }
        } = await conmentArticle(parmas)
        console.log(res)
        this.commentlList.push(...res.results)
        this.offset = res.last_id
        this.totalCount = res.total_count
        // 加载状态结束
        this.loading = false
        this.finished = true
        if (res.results) {
          // 数据加载完成
          this.finished = true
        }
      } catch (error) {
        this.loading = false
        this.finished = true
        console.log(error)
      }
    },
    // 添加回复
    updataComment (data) {
      this.commentlList.unshift(data)
    }
  },
  components: { Comments }
}
</script>

<style lang="less" scoped>
//关闭图标
/deep/ .van-popup__close-icon {
  position: fixed;
}
.replyWrapper {
  .title {
    position: fixed;
    top: 44%;
    transform: translate(0, -50%);
    width: 100%;
    text-align: center;
    font-size: 32px;
  }
  .main {
    margin-top: 100px;
    .replyWho {
      display: flex;
      padding: 0 20px;
      .replyWho-photo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: coral;
        img{
           width: 60px;
        height: 60px;
        border-radius: 50%;
        }
      }
      .replyWho-left {
        flex: 1;
        margin-left: 10px;
        .replyWho-userInfo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .replyWho-name {
            font-size: 28px;
            color: cornflowerblue;
          }
          .replyWho-praise {
            font-size: 28px;
            color: #999;
            .toutiao-dianzan {
              font-size: 28px;
            }
          }
        }
        .replyWho-comtent {
          font-size: 32px;
          color: #222222;
          margin-top: 10px;
        }
        .replyWho-operation {
          font-size: 26px;
          color: #666;
          margin-top: 15px;
          display: flex;
          .reply {
            margin-left: 10px;
          }
        }
      }
    }
    .allReply {
      padding: 15px 20px;
      font-size: 26px;
      color: #222222;
      margin-top: 20px;
      border-top: 2px solid #999;
      b {
        font-size: 24px;
        color: #666;
        margin-left: 10px;
      }
    }
    .reply-item {
      display: flex;
      padding: 0 20px;
      margin-top: 15px;
      .photo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: coral;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      .left {
        flex: 1;
        margin-left: 10px;
        .userInfo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-size: 28px;
            color: cornflowerblue;
          }
          .praise {
            font-size: 28px;
            color: #999;
            .toutiao-dianzan {
              font-size: 28px;
            }
          }
        }
        .comtent {
          font-size: 32px;
          color: #222222;
          margin-top: 10px;
        }
        .operation {
          font-size: 26px;
          color: #666;
          margin-top: 15px;
          display: flex;
          .reply {
            width: 80px;
            height: 30px;
            font-size: 22px;
            color: #222222;
            line-height: 30px;
            text-align: center;
            background-color: aquamarine;
            border: 1px solid aquamarine;
            border-radius: 15px;
            margin-left: 25px;
          }
        }
      }
    }
  }
}
</style>
